<template>
    <div class="uerManagement">
        <h5 style="margin-bottom:15px;">
            <span>用户管理</span>
        </h5>
		<!-- <el-form :model="queryParams" ref="queryForm" :inline="true">
			<el-form-item label="用户姓名" prop="UserNick">
				<el-input v-model="queryParams.UserNick" placeholder="请输入用户姓名" clearable style="width: 240px;" @keyup.enter.native="handleQuery"/>
			</el-form-item>
      		<el-form-item label="手机号码" prop="UserPhone">
				<el-input v-model="queryParams.UserPhone" placeholder="请输入手机号码" clearable style="width: 240px;" @keyup.enter.native="handleQuery"/>
			</el-form-item>
			<el-form-item label="日期:" prop="createTime">
				<el-date-picker v-model="indatetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search"  @click="handleQuery">查询</el-button>
				<el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form> -->
        <div >
            <el-table ref="multipleTable"  tooltip-effect="dark" style="width: 100%" border
			  :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"this
			  >
              <!-- <el-table-column prop="shopCode" label="姓名"/> -->
			  <el-table-column prop="UserNick" label="用户姓名"/>
              <el-table-column prop="UserPhone" label="用户账号"/>
              <el-table-column prop="UserMail" label="用户邮箱"/>
			  <!-- <el-table-column prop="ShopId" label="店铺Id"/>
              <el-table-column prop="shopCode" label="状态"/> -->
            </el-table>
        </div>
		<div class="fenye">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 40]"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>

    </div>
</template>

<script>
	
export default {
    data(){
        return{
			// 总条数
			total: 0,
			currentPage: 1,//page
			pagesize:10,//条数
            tableData:[],//列表
			queryParams:{
				UserPhone:undefined,
				UserNick:undefined,
			},
			token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MzI1NTUyMjMsInVzZXJfaWQiOjEzNiwidXNlcl9waG9uZSI6IjE1MTMxNjMyMDUzIiwidXNlcl9uaWNrIjoi6aaZ6JWJIiwidXNlcl9pb2MiOiJodHRwczovL2NrbGNvay5vc3MtY24temhhbmdqaWFrb3UuYWxpeXVuY3MuY29tL3VzZXJpY28vMTM2LnBuZyIsInJlY29tbWVuZF91c2VyIjowfQ.B60pnaRucO9mREX1jR4LXEFAK3_aPZYBM3DmfWRtKa0"
        }
    },
    mounted(){
		this.getList()
    },
    methods:{
        getList() {
			let params ={
				UserPhone:this.queryParams.Msg,
				UserNick:this.queryParams.start,
			}
		   this.axios({
			   method:'get',
			   url:'/user/list',
			   data:params,
			   headers:{
					Authorization:'Bearer ' + this.token
			   }
		   }).then(res=>{
			   console.log(res,'用户列表---------')
			   this.tableData = res.data.data
        	   this.total = res.data.data.length;
		   })
         },
		/** 搜索按钮操作 */
		handleQuery() {
			this.currentPage = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams={
				UserPhone:'',
				UserNick:'',
			},
			this.handleQuery();
		},
		 handleSizeChange(size) {
			this.pagesize = size;
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
		},

    },
    watch:{
        
    }
}
</script>

<style scoped>
 .item >>> .el-date-editor .el-range-separator{
	padding:0px 0px !important;
}
.uerManagement-header {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}
    /* 搜索input框 */
.search-inp {
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  width: 330px;
  margin-bottom: 6px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
/* 搜索按钮 */
.search-btn {
  width: 460px;
  margin-left: 168px;
}
.search-btn span{
    margin-right: 20px;
}

.table{
    margin-top: 20px;
}
</style>